---
type: tutorial
title: RSSフィードを追加する
description: >-
  「初めてのAstroブログ」チュートリアル -
  Astroの公式パッケージをインストールして、読者が購読可能なフィードを作成する
i18nReady: true
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - ウェブサイトのRSSフィードを作成するためのAstroパッケージをインストールする
  - RSSリーダーで購読できるフィードを作成する
</PreCheck>

## AstroのRSSパッケージをインストールする

Astroは、ウェブサイトにRSSフィードを素早く追加するためのカスタムパッケージを提供しています。

この公式パッケージは、Feedly、The Old Readerなどの**フィードリーダー**で読むことができる、ブログ記事に関する情報を含んだHTMLではないドキュメントを生成します。このドキュメントは、サイトがビルドされるたびに更新されます。

個々人はフィードリーダーでフィードを購読でき、サイトに新しいブログ記事が公開されると通知を受け取ることができるため、多くの人がこの機能を利用しています。

<Steps>
1. Astroの開発サーバーを終了し、ターミナルで次のコマンドを実行して、AstroのRSSパッケージをインストールします。

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install @astrojs/rss
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add @astrojs/rss
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add @astrojs/rss
      ```
      </Fragment>
    </PackageManagerTabs>

2. Astroプロジェクトで作業を再開するために、開発サーバーを再起動します。

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run dev
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run dev
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run dev
      ```
      </Fragment>
    </PackageManagerTabs>
</Steps>

## `.xml`フィードドキュメントを作成する

<Steps>
1. `src/pages/`に`rss.xml.js`という名前の新しいファイルを作成します。

2. この新しいファイルに以下のコードをコピーします。`title`と`description`プロパティをカスタマイズし、必要に応じて`customData`で別の言語を指定してください。

    ```js title="src/pages/rss.xml.js"

    import rss, { pagesGlobToRssItems } from '@astrojs/rss';

    export async function GET(context) {
      return rss({
        title: 'Astro学習者 | ブログ',
        description: 'Astroを学ぶ旅',
        site: context.site,
        items: await pagesGlobToRssItems(import.meta.glob('./**/*.md')),
        customData: `<language>ja-jp</language>`,
      });
    }
    ```

3. `site`プロパティをAstroの設定に追加し、サイト固有のNetlify URLを指定します。
    ```js title="astro.config.mjs" ins={4}
    import { defineConfig } from "astro/config";

    export default defineConfig({
      site: "https://example.com"
    });
    ```

4. `rss.xml`ドキュメントはサイトがビルドされたときにのみ作成されるため、開発中にブラウザでこのページを表示することはできません。開発サーバーを終了して次のコマンドを実行し、サイトをローカルでビルドしてから、ビルドしたサイトのプレビューを確認します。

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run build

      npm run preview
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run build

      pnpm run preview
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run build

      yarn run preview
      ```
      </Fragment>
    </PackageManagerTabs>

5. `http://localhost:4321/rss.xml`にアクセスし、各`.md`ファイルに対応する`item`を含んだページに（フォーマットされていない）テキストが表示されることを確認します。各アイテムには、`title`、`url`、`description`など、ブログ記事の情報が含まれているはずです。

    :::tip[リーダーでrssフィードを表示する]
    フィードリーダーをダウンロードするか、オンラインのフィードリーダーサービスにサインアップし、自分のNetlify URLを追加してサイトを購読します。このリンクを他の人に共有すれば、記事に購読し、新しい記事が公開されたときに通知を受け取ってもらうようにもできます。
    :::

6. 開発モードでサイトを再び表示したいときは、プレビューを終了して開発サーバーを再起動してください。
</Steps>

<Box icon="check-list">

## チェックリスト

<Checklist>
- [ ] コマンドラインを使用してAstroパッケージをインストールできる。
- [ ] ウェブサイトのRSSフィードを作成できる。
</Checklist>
</Box>

### 参考

- [AstroにおけるRSSアイテムの生成](/ja/guides/rss/#globインポートの使用)
